import { Card, Skeleton } from 'antd';
import React from 'react';

import styles from './index.less';

interface DataCardPropsState {
  title: string | any;
  children: any;
  style?: any;
  loading?: boolean;
}

const DataCard = ({
  title,
  children,
  style,
  loading = false,
}: DataCardPropsState) => {
  return (
    <Card className={styles.card}>
      <div className={styles.title}>
        <i />
        <span>{title}</span>
      </div>
      {loading ? <Skeleton active /> : <div style={style}>{children}</div>}
    </Card>
  );
};

DataCard.defaultProps = {
  style: {
    padding: '24px',
    paddingBottom: 0,
  },
};

export default DataCard;
